<template>
	<div class="icons">
		<swiper>
			<swiper-slide v-for="(page, i) in pages" :key="i">
				<div class="icon" v-for="(item, index) in page" :key="item.id">
					<div class='icon-img'>
						<img class='icon-img-content' :src="item.imgUrl" />
					</div>
					<p class="icon-desc">{{ item.desc }}</p>
				</div>
			</swiper-slide>
		</swiper>
	</div>
</template>

<script>
	export default {
		name: 'HomeIcons',
		data() {
			return {
				swiperOption: {
					autoplay: false // 不让它自动滚动
				}
			}
		},
		props: ['iconList'],
		computed: {
			pages () {
			  // 多页切换效果
			  let pages = []
			  this.iconList.forEach((item, index) => {
				let page = Math.floor(index / 8)
				if (!pages[page]) {
				  pages[page] = []
				}
				pages[page].push(item)
			  })
			  return pages
			}
		}
	}
</script>

<style lang="less">
	@import '~styles/varibles.less';
	@import '~styles/mixins.less';
	.icons{
		.swiper-container{
			height: 0;
			padding-bottom: 50%;
		}
		.icon{
			position: relative;
			overflow: hidden;
			float: left;
			width: 25%;
			height: 0;
			padding-bottom: 25%;
		}
		.icon-img{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: .44rem;
			box-sizing: border-box;
			padding: .1rem;
		}
		.icon-img-content{
          display: block;
          margin: 0 auto;
          height: 100%;
		}
		.icon-desc{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: .44rem;
			line-height: .44rem;
			text-align: center;
			color: @darkTextColor;
			.ellipsis();
		}
	}
</style>
